// 指令库
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Pagination, Modal} from 'antd';
import action from '../../store/actions/instructionLibrary';
import navAction from '../../store/actions/leftNav';
import Search from './Search';
import Header from './Header';
import InstructionList from './InstructionList';
import {
  rejectInstructionrequest,
  agreeInstructionrequest
} from '../../api';

import 'animate.css';
import './InstructionLibrary.scss';
import '../goodsLibrary/MyUpload.scss';


class InstructionLibrary extends Component {
  state = {
    loadingArr: [],
    current: 1,
    search: '',
    agreeRes: [],
    visible: false
  };

  // 分页改变
  onChange = page => {
    const {search} = this.state;
    console.log(page);
    this.setState({
      current: page
    });
    this.initPages(page, 10, search);
  };

  tempInitPages = () => {
    setTimeout(() => {
      this.initPages(this.state.current);
      this.props.GET_INSTRUCTION_COUNT(localStorage.getItem('username'));
    }, 1000);
  };

  search = value => {
    this.setState({current: 1});
    this.initPages(1, 10, value);
  };
  // 清除搜索
  clear = () => {
    this.setState({
      search: '',
      current: 1
    });
    this.initPages();
  };
  // 数据改变
  change = search => {
    console.log(search);
    this.setState({search});
  };

  // 页面初始化数据
  initPages = (page, page_size, search) => {
    const {GET_INSRUCTIONLIBRARY_DATA} = this.props;
    GET_INSRUCTIONLIBRARY_DATA(page, page_size, search).then(res => {
      // 生成相应的loading的数组 映射对应的loading
      let tempLength = this.props.instructionLibraryData.length;
      let tempArr = [];
      for (let i = 0; i < tempLength; i++) {
        tempArr.push(false);
      }
      this.setState(prevState => {
        return {
          loadingArr: tempArr
        };
      });
    });
  };

  // 同意
  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };

  instructionAgree = async (action, index) => {
    console.log(this.state.loadingArr);
    const tempArr = this.state.loadingArr.concat();
    tempArr[index] = !tempArr[index];
    this.setState(prevState => {
      return {
        loadingArr: tempArr
      };
    });

    let res = await agreeInstructionrequest(action.code);
    let agreeRes = [];
    for (let op in res.data) {
      agreeRes.push(res.data[op]);
    }

    tempArr[index] = !tempArr[index];
    this.setState(prevState => {
      return {
        loadingArr: tempArr,
        agreeRes
      };
    });
    this.showModal();
    await this.initPages(this.state.current);
  };

  // 驳回
  instructionReject = async (id, msg) => {
    await rejectInstructionrequest(id, msg);
    await this.initPages(this.state.current);
  };

  componentDidMount() {
    this.initPages(this.state.current);
  }

  render() {
    const {instructionLibraryData: data, pageCount} = this.props;
    return (
      <div className='animated slideInDown InstructionLibrary'>
        <Header/>
        <Search search={this.search} clear={this.clear} value={this.state.search} change={this.change}/>
        <InstructionList
          data={data}
          instructionAgree={this.instructionAgree}
          instructionReject={this.instructionReject}
          tempInitPages={this.tempInitPages}
          loadingArr={this.state.loadingArr}
        />
        <Pagination
          current={this.state.current}
          onChange={this.onChange}
          total={pageCount ? +pageCount : 1}
          style={{textAlign: 'center'}}
          hideOnSinglePage
        />
        <Modal
          width={1000}
          title="上传结果："
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <ul className={'myResult000111'}>
            {
              this.state.agreeRes.length && this.state.agreeRes.map((item, index) => (
                <li key={index}>{item.map((v, i) => <span key={index + i}>{v}</span>)}</li>
              ))
            }
          </ul>
        </Modal>
      </div>
    );
  }

}

const mapStateToProps = state => state.instructionLibrary;
export default connect(mapStateToProps, {...action, ...navAction})(InstructionLibrary);
